import { usePageTitle } from '../hooks/usePageTitle';
import { ImageWithLoader } from '../components/ImageWithLoader';

export function About() {
  usePageTitle('About Us');
  
  const team = [{
    name: 'Alex Chen',
    role: 'Founder & Editor-in-Chief',
    image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    bio: 'Former home appliance industry executive with 15+ years of experience in product development and testing.'
  }, {
    name: 'Sarah Johnson',
    role: 'Senior Product Reviewer',
    image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    bio: 'Certified home technology specialist with expertise in smart kitchen and climate control systems.'
  }, {
    name: 'Michael Torres',
    role: 'Technical Director',
    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    bio: 'Electrical engineer specializing in home automation and integration of smart appliances.'
  }, {
    name: 'Jennifer Lee',
    role: 'Design & Lifestyle Editor',
    image: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1961&q=80',
    bio: 'Interior designer with a passion for creating functional, beautiful spaces around premium appliances.'
  }];
  return <div className="w-full">
      {/* Hero section */}
      <div className="bg-[#343a40] py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
              About AppliancePicks
            </h1>
            <p className="text-xl text-white mb-8">
              We're on a mission to help consumers make smarter decisions about
              the appliances they bring into their homes.
            </p>
          </div>
        </div>
      </div>
      {/* Our story */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto">
            <h2 className="text-3xl font-bold mb-6">Our Story</h2>
            <p className="text-gray-600 mb-4">
              AppliancePicks was founded in 2018 by Alex Chen, a former home
              appliance industry executive who saw a gap in the market for truly
              unbiased, expert-driven recommendations for premium home
              appliances.
            </p>
            <p className="text-gray-600 mb-4">
              After years of watching consumers struggle with confusing
              marketing claims and disappointing purchases, Alex assembled a
              team of industry experts, engineers, and designers to create a
              resource that would cut through the noise and provide genuinely
              helpful guidance.
            </p>
            <p className="text-gray-600 mb-8">
              Today, AppliancePicks has grown into a trusted authority in the
              smart home space, helping thousands of consumers each month make
              confident decisions about their appliance investments.
            </p>
            <div className="border-l-4 border-[#d4a373] pl-4 italic text-gray-600 mb-8">
              "We believe that the right appliances can truly transform your
              daily life, saving time, reducing stress, and even bringing joy to
              routine tasks. Our goal is to help you find those perfect matches
              for your home and lifestyle."
              <p className="mt-2 font-medium not-italic">
                — Alex Chen, Founder
              </p>
            </div>
          </div>
        </div>
      </section>
      {/* Our approach */}
      <section className="py-16 bg-[#f8f9fa]">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto">
            <h2 className="text-3xl font-bold mb-6">Our Approach</h2>
            <div className="bg-white p-6 rounded-lg shadow-md mb-8">
              <h3 className="text-xl font-bold mb-3">Rigorous Testing</h3>
              <p className="text-gray-600">
                Every product we recommend undergoes extensive hands-on testing
                in real-world conditions. We evaluate performance, ease of use,
                durability, and smart features to ensure our recommendations
                stand the test of time.
              </p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md mb-8">
              <h3 className="text-xl font-bold mb-3">Editorial Independence</h3>
              <p className="text-gray-600">
                While we may earn commissions through affiliate links, our
                recommendations are never influenced by brands or partnerships.
                Our testing and evaluation processes are completely independent
                from our monetization strategy.
              </p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-bold mb-3">Practical Expertise</h3>
              <p className="text-gray-600">
                Our team combines technical knowledge with practical experience.
                We understand not just how appliances work, but how they fit
                into real homes and everyday routines.
              </p>
            </div>
          </div>
        </div>
      </section>
      {/* Our team */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-10 text-center">
            Meet Our Team
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {team.map(member => <div key={member.name} className="text-center">
                <ImageWithLoader src={member.image} alt={member.name} className="w-32 h-32 rounded-full mx-auto mb-4 object-cover" />
                <h3 className="font-bold text-lg">{member.name}</h3>
                <p className="text-[#d4a373] mb-2">{member.role}</p>
                <p className="text-gray-600 text-sm">{member.bio}</p>
              </div>)}
          </div>
        </div>
      </section>
      {/* Media mentions */}
      <section className="py-16 bg-[#e9ecef]">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-10 text-center">
            As Featured In
          </h2>
          <div className="flex flex-wrap justify-center items-center gap-12">
            {['Forbes', 'TechCrunch', 'HGTV', 'Good Housekeeping', 'CNET'].map(media => <span key={media} className="text-2xl font-bold text-gray-500">
                  {media}
                </span>)}
          </div>
        </div>
      </section>
    </div>;
}